<script lang="ts" setup>

import NavContent from './NavContent.vue'
import { ref } from 'vue'
import { getSelectItemData } from '../../../common/utils/normalUtils'

const emit = defineEmits(['update:modelValue', 'close', 'change'])
const props = defineProps({
  source: {
    type: Array,
    default: () => {
      return []
    }
  },
  modelValue: {
    type: String,
    default: ''
  },
  isLoading: {
    type: Boolean,
    default: false
  },
  valueField: {
    type: String,
    default: 'value'
  },
  labelField: {
    type: String,
    default: 'label'
  },
  showClose: {
    type: Boolean,
    default: false
  },
  maxWidth: {
    type: Number,
    default: 92
  },
  border: {
    type: Boolean,
    default: false
  },
  auto: {
    type: Boolean,
    default: false
  }
})

const contentRef = ref()

const navClickHandler = (item:any) => {
  emit('update:modelValue', item[props.valueField])
  emit('change', item)
}

defineExpose({
  getContent: () => {
     const arr = contentRef.value
    const { index } = getSelectItemData(props.source, props.modelValue, props.valueField)
    return arr[index]
  }
})

</script>

<template>
  <div :class="['att-container',auto?'att-container-auto':'']">
    <!--导航-->
    <div class="nav-header">
      <template v-for="item of source" :key="item[valueField]">
        <div v-if="!item.hidden"
             :class="['nav-item',modelValue===item[valueField]?'nav-item-sel':'']"
             @click="navClickHandler(item)">
          <div class="n-lb" :style="{maxWidth:maxWidth+'px'}" :title="item[labelField]||item[valueField]">
            <slot name="title"
                  :title="item[labelField]"
                  :data="item"
                  :value="item[valueField]">
              {{ item[labelField]||item[valueField] }}
            </slot>
          </div>
        </div>
      </template>
      <div class="nav-end">
        <slot name="ctr" />
      </div>
    </div>

    <!--内容-->
    <div :class="['nav-content',border?'nav-content-bor':'',auto?'nav-content-auto':'']">
      <slot>
        <template v-for="item of source">
          <nav-content v-if="item.component"
                       :select="modelValue===item[valueField]">
            <component :is="item.component" ref="contentRef" />
          </nav-content>
        </template>
      </slot>
    </div>

    <!--局部状态-->
    <v-loading v-if="isLoading" />
  </div>
</template>

<style scoped lang="scss">

.att-container-auto{
  height:auto;
}
.att-container{
  @include ver-group();
  width:100%;
  height:100%;
  box-sizing: border-box;
  overflow: hidden;

  .nav-header{
    @include hor-group() ;
    flex:none;
    width:100%;
    height: var(--w-tab-height);
    overflow: hidden;
    padding-bottom:2px;
    box-sizing: border-box;

    .nav-item{
      @include hor-group(center) ;
      flex:none;
      height: 100%;
      cursor:pointer;
      color:var(--w-color-nor);
      padding: 0 15px ;
      box-sizing: border-box;
      font-size:var(--w-size-title1) ;

      .n-lb{
        @include text-dot();
        flex:none;
        max-width: 95px;
        min-width: 10px;
        box-sizing: border-box;
      }

      &:hover{
        color:var(--w-color-light2);
      }
    }

    .nav-item-sel{
      background: var(--w-color-light);
      color:var(--w-f-color-light0);

      &:hover{
        color:var(--w-f-color-light0);
      }
    }

    .nav-end{
      @include hor-group(end);
      width:100%;
      height:100%;
      flex:auto;
    }

  }

  .nav-content{
    flex:auto;
    width:100%;
    height:100%;
    position:relative;
    overflow: hidden;
    border-top:1px solid var(--w-color-bor);
    box-sizing: border-box;
  }
  .nav-content-auto{
    height:auto;
  }
  .nav-content-bor{
    border:1px solid var(--w-color-bor);
  }

}

</style>
